html,body, ul{
    margin: 0;
    padding: 0;
}

body{
    background-color: #000;
}

.aniplex{
    width: 100vw;
    height: 100vh;
    
    display: flex;
    justify-content: center;
    align-items: center;

    perspective: 450;
    -webkit-perspective: 450;

    animation: hide-aniplex 2s ease-in forwards;
    animation-delay: 1.8s;
}

.content .item{
    color: white;
    font-size: 6vw;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    width: 8vw;
    line-height: 6vw;
    position: relative;
}

.content .rect{
    width: 6vw;
    height: 6vw;
    position: absolute;
    border-width: 0.4vw;
    border-style: solid;
    border-radius: 0.18vw;

    margin-left: -48vw;
    z-index: -1;
}

.rect.a,
.rect.x{
    border-color: #5b4489;
}

.rect.n,
.rect.e{
    border-color: #aa4776;
}

.rect.i,
.rect.l{
    border-color: #d74061;
}

.rect.a{
    animation: amove .6s linear forwards;
    animation-delay: 1.8s;
}
.rect.n{
    animation: nmove .9s linear forwards;
    animation-delay: 1.5s;
}
.rect.i{
    animation: imove 1.2s linear forwards;
    animation-delay: 1.2s;
}
.rect.p{
    border-color: #e93432;
    animation: pmove 1.5s linear forwards;
    animation-delay: .9s;
}
.rect.l{
    animation: lmove 1.8s linear forwards;
    animation-delay: .6s;
}
.rect.e{
    animation: emove 2.1s linear forwards;
    animation-delay: .3s;
}
.rect.x{
    animation: xmove 2.4s linear forwards;
}
@keyframes amove {
    0%{
        transform: rotateY(0deg);
        opacity: 1;
    }

    50%{ 
        transform: rotateY(180deg);
    }

    100%{ 
        transform: rotateY(360deg);
        opacity: 1;
    }
}
@keyframes nmove {
    0%{
        transform: rotateY(135deg) scale(1.1, 1.1);
        opacity: 1;
    }

    60%{ 
        transform: translateX(4.8vw) rotateY(45deg) scale(1.1, 1.1);
    }

    85%{ 
        transform: translateX(calc(8vw * 0.85)) rotateY(103deg) scale(1.2, 1.2);
    }

    100%{ 
        transform: translateX(8vw) rotateY(65deg) scale(1.2, 1.2);
        opacity: 1;
    }
}
@keyframes imove {
    0%{
        opacity: 1;
    }

    30%{ 
        transform: translateX(calc(16vw*0.3)) rotateY(135deg) scale(1.2, 1.2);
    }

    60%{ 
        transform: translateX(calc(16vw*0.6)) rotateY(45deg) scale(1.3, 1.3);
    }

    85%{ 
        transform: translateX(calc(16vw*0.85)) rotateY(103deg) scale(1.3, 1.3);
    }

    100%{ 
        transform: translateX(16vw) rotateY(75deg) scale(1.3, 1.3);
        opacity: 1;
    }
}
@keyframes pmove {
    0%{
        opacity: 1;
    }

    30%{ 
        transform: translateX(calc(24vw*0.3)) rotateY(135deg) scale(1.2, 1.2);
    }

    60%{ 
        transform: translateX(calc(24vw*0.6)) rotateY(45deg) scale(1.4, 1.4);
    }

    85%{ 
        transform: translateX(calc(24vw*0.85)) rotateY(135deg) scale(1.6, 1.6);
    }

    100%{ 
        transform: translateX(24vw) rotateY(90deg) scale(1.6, 1.6);
        opacity: 1;
    }
}
@keyframes lmove {
    0%{
        opacity: 1;
    }

    33%{ 
        transform: translateX(calc(32vw*0.33)) rotateY(135deg) scale(1.2, 1.2);
    }

    66%{ 
        transform: translateX(calc(32vw*0.66)) rotateY(45deg) scale(1.6, 1.6);
    }

    85%{ 
        transform: translateX(calc(32vw*0.85)) rotateY(100deg) scale(1.4, 1.4);
    }

    100%{ 
        transform: translateX(32vw) rotateY(103deg) scale(1.3, 1.3);
        opacity: 1;
    }
}
@keyframes emove {
    0%{
        opacity: 1;
    }

    33%{ 
        transform: translateX(calc(40vw*0.33)) rotateY(135deg) scale(1.2, 1.2);
    }

    66%{ 
        transform: translateX(calc(40vw*0.66)) rotateY(45deg) scale(1.6, 1.6);
    }

    85%{ 
        transform: translateX(calc(40vw*0.85)) rotateY(135deg) scale(1.2, 1.2);
    }

    100%{ 
        transform: translateX(40vw) rotateY(103deg) scale(1.2, 1.2);
        opacity: 1;
    }
}
@keyframes xmove {
    0%{
        opacity: 1;
    }

    25%{ 
        transform: translateX(calc(48vw*0.25)) rotateY(135deg) scale(1.2, 1.2);
    }

    50%{ 
        transform: translateX(calc(48vw*0.5)) rotateY(45deg) scale(1.6, 1.6);
    }

    85%{ 
        transform: translateX(calc(48vw*0.85)) rotateY(135deg) scale(1.2, 1.2);
    }

    100%{ 
        transform: translateX(48vw) rotateY(0deg) scale(1,1);
        opacity: 1;
    }
}

.content .rect-edge{
    width: 0.36vw;
    height: 12vw;
    background-color: #e93432;
    position: absolute;
    opacity: 0;
    animation: show-edge 0s forwards 2.3s;
}

@keyframes show-edge {
    to{
        opacity: 1;
    }
}

.content .item{
    opacity: 0;
}
.content .item:nth-child(1){
    animation: char12 2.4s linear forwards;
}
.content .item:nth-child(2){
    animation: char12 2.1s linear forwards;
    animation-delay: .3s;
}
.content .item:nth-child(3){
    animation: char34 1.8s linear forwards;
    animation-delay: .7s;
}
.content .item:nth-child(4){
    animation: char34 .9s linear forwards;
    animation-delay: 1.2s;
}
.content .item:nth-child(5){
    animation: char34 .8s linear forwards;
    animation-delay: 1.5s;
}
.content .item:nth-child(6){
    animation: char34 .7s linear forwards;
    animation-delay: 1.8s;
}
.content .item:nth-child(7){
    animation: char34 .6s linear forwards;
    animation-delay: 2.1s;
}
@keyframes char12 {
    0%{
        opacity: 1;
        transform: rotateY(0deg);
    }

    100%{
        opacity: 1;
        transform: rotateY(720deg);
    }
}
@keyframes char34 {
    0%{
        opacity: 1;
        transform: rotateY(180deg);
    }

    100%{
        opacity: 1;
        transform: rotateY(720deg);
    }
}
@keyframes char567 {
    0%{
        opacity: 1;
        transform: rotateY(270deg);
    }

    100%{
        opacity: 1;
        transform: rotateY(720deg);
    }
}

@keyframes hide-aniplex {
    from{
        opacity: 1;
    }

    to{
        opacity: 0;
    }
}